<template>
    <div>
      <div style="padding-top: 15px;margin: auto;min-height: 100vh;">
        <div class="app-container">
          <div>
            <el-row :gutter="20">
              <el-col :span="6" :xs="24">
                <el-card>
                  <!--            -->
                  <div class="clearfix">
                    <span>个人简介</span>
                  </div>
                  <div class="user-profile">
                    <div class="box-center">
                      <pan-thumb :image="image0" :height="'100px'" :width="'100px'" :hoverable="false">
                        <!-- <el-upload
                            :headers="authHeader"
                            :data="{ no: '0', studentNum: form.num }"
                            :action="'/api/teach/uploadPersonImage'"
                            :show-file-list="false"
                            :on-success="onSuccess">
                          <el-button type="primary" icon="el-icon-upload" circle></el-button>
                        </el-upload> -->
                      </pan-thumb>
                    </div>
                    <div class="box-center">
                      <transition name="slide" mode="out-in">
                        <div class="user-name text-center" v-show="!editShow">{{ form.name }}</div>
                      </transition>
                      <transition name="slide" mode="out-in">
                        <div class="user-name text-center" v-show="editShow">
                          <el-input
                              v-model="form.name"
                              placeholder="姓名"
                              style="width: 30%"
                          />
                        </div>
                      </transition>
                      <div class="user-role text-center text-muted">
                        {{ role }}
                      </div>
                      <div class="user-role text-center text-muted">
                        <div style="text-align: left;float: left;margin-bottom: 10px;width: 270px">
                          性别:
                          <transition name="slide" mode="out-in">
                            <div style="display: inline-block;text-align: left;height: 30px" v-show="!editShow">
                              <span v-if="sexValue==='1'" style="margin-right: 160px">男</span>
                              <span v-else style="margin-right: 160px">女</span>
                              <el-button type="primary" icon="el-icon-edit" @click="editShow=!editShow"></el-button>
                            </div>
  
  
                          </transition>
                          <transition name="slide" mode="out-in">
                            <el-select v-model="sexValue" placeholder="请选择" style="width: 25%;" v-show="editShow">
                              <el-option
                                  v-for="item in genderList"
                                  :key="item.value"
                                  :label="item.title"
                                  :value="item.value">
                              </el-option>
                            </el-select>
                          </transition>
                        </div>
  
                        <div style="text-align: left">
                          <span>出生日期:</span>
                          <transition name="slide" mode="out-in">
                            <div style="display: inline-block;" v-show="!editShow">{{ form.birthday }}</div>
                          </transition>
                          <transition name="slide" mode="out-in">
                          <span v-show="editShow" style="width: 270px;">
                            <el-date-picker
                              v-model="form.birthday"
                              type="date"
                              style="width: 97%"
                              value-format="yyyy-MM-dd"
                              placeholder="选择出生日期"
                            />
                            <span style="margin-left: 50px">
                              <el-button type="success" icon="el-icon-check" @click="editShow=!editShow;doSubmit()">提交</el-button>
                            </span>
                          </span>
                          </transition>
                        </div>


                        



                      </div>
                    </div>
                  </div>
  
                  <div class="user-bio">
                    <div class="user-education user-bio-section">
                      <div class="user-bio-section-header"><i class="el-icon-reading"></i> <span>学号</span></div>
                      <div class="user-bio-section-body">
                        <transition name="slide" mode="out-in">
                          <div class="text-muted" v-show="!editShow">
                            {{ form.num }}
                          </div>
                        </transition>
                        <transition name="slide" mode="out-in">
                          <div class="text-muted" v-show="editShow">
                            <el-tooltip
                                class="item"
                                effect="dark"
                                content="学号不可修改"
                                placement="top-start">
                              <el-input
                                  v-model="form.num"
                                  placeholder="请输入学号"
                                  style="width: 90%"
                                  disabled
                              />
                            </el-tooltip>
                          </div>
                        </transition>
                      </div>
                    </div>
  
                    <div class="user-education user-bio-section">
                      <div class="user-bio-section-header"><i class="el-icon-school"></i> <span>学院</span></div>
                      <div class="user-bio-section-body">
                        <transition name="slide" mode="out-in">
                          <div class="text-muted" v-show="!editShow">
                            {{ form.dept }}
                          </div>
                        </transition>
                        <transition name="slide" mode="out-in">
                          <div class="text-muted" v-show="editShow">
                            <el-input
                                v-model="form.dept"
                                placeholder="学院"
                            />
                          </div>
                        </transition>
                      </div>
                    </div>
                  </div>
                </el-card>
              </el-col>
  
              <el-col :span="18" :xs="24">
                <el-card>
                  <el-tabs v-model="activeTab" width="20%">
                    <el-tab-pane label="我的博客" name="myBlog">
                      <div style="float:left;">
                        <el-button type="primary" icon="el-icon-edit" @click="dialogVisible=true">编辑博客</el-button>
                        <el-button type="info" icon="el-icon-download" @click="downPDF">下载博客pdf</el-button>
                        <el-dialog
                            title="学生博客"
                            v-model="dialogVisible"
                            width="90%"
                            :show-close="showClose"
                        >
                          <div v-if="edit">
                            <v-md-editor v-model="form.blog" height="400px"></v-md-editor>
                          </div>
                          <div v-else-if="fEdit">
                            <BasicEditor :the-content="form.blog" v-on:saveData="saveData"></BasicEditor>
                          </div>
                          <div v-else>
                            <v-md-editor v-model="form.blog" mode="preview"></v-md-editor>
                          </div>
                          <template #footer>
                   <span class="dialog-footer">
                     <el-button v-if="!fEdit&&!edit" class="orangeButton" @click="fEdit = true">富文本编辑</el-button>
                     <el-button v-if="!edit&&!fEdit" class="orangeButton" @click="edit = true">Markdown编辑</el-button>
                     <el-button type="primary"
                                @click="doSubmit();dialogVisible = false;edit = false;fEdit=false">确 定</el-button>
                   </span>
                          </template>
                        </el-dialog>
                      </div>
                      <v-md-editor v-model="form.blog" mode="preview"></v-md-editor>
                    </el-tab-pane>
                    <el-tab-pane label="用户画像" name="portrait">
                      <el-row :gutter="30">
                        <el-col :span="24" style="margin-bottom: 20px">
                          <el-card>
                            <div style="margin-bottom: 15px">
                              <i class="el-icon-s-data"></i><span style="font-weight: bold">成绩分析</span>
                            </div>
                            <div v-for="item in scoreList"
                                 :key="item.courseId"
                                 style="text-align: left;">
                              <span>{{ item.courseName }}</span>
                              <el-progress
                                  :percentage="item.mark"
                                  :color="customColorMethod(item.mark)"
                                  :format="format">
                              </el-progress>
                            </div>
                            <div style="text-align: left;margin-top: 10px">
                              <span>平均成绩</span>
                              <el-progress
                                  :percentage="averageScore"
                                  :color="customColorMethod(averageScore)"
                                  :format="format">
                              </el-progress>
                            </div>
                            <el-tag size="small" style="margin-top: 13px">{{ scoreTag }}</el-tag>
                          </el-card>
                        </el-col>
                      </el-row>
                      <el-card style="margin-bottom: 20px">
                        <div style="margin-bottom: 15px">
                          <i class="el-icon-star-on"></i><span style="font-weight: bold">他人眼中的自己</span>
                        </div>
  
                        <el-row :gutter="30">
                          <el-col :span="8">
                            <el-card>
                              <h5>品行</h5>
                              <el-rate
                                  v-model=morality
                                  disabled
                                  :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                              >
                              </el-rate>
                              <el-tag size="small" style="margin-top: 13px">{{ moralityTag }}</el-tag>
                            </el-card>
                          </el-col>
                          <el-col :span="8">
                            <el-card>
                              <h5>才华</h5>
                              <el-rate
                                  v-model=e2
                                  disabled
                                  :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                              >
                              </el-rate>
                              <el-tag size="small" style="margin-top: 13px">{{ e2Tag }}</el-tag>
                            </el-card>
                          </el-col>
                          <el-col :span="8">
                            <el-card>
                              <h5>总体评价</h5>
                              <el-rate
                                  v-model=e3
                                  disabled
                                  :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                              >
                              </el-rate>
                              <el-tag size="small" style="margin-top: 13px">{{ e3Tag }}</el-tag>
                            </el-card>
                          </el-col>
                        </el-row>
                        <el-row :gutter="30">
                          <el-col style="margin-top: 20px" :span="12">
                            <el-card>
                              <h5>标签</h5>
                              <!-- <el-alert
                                  v-for="item in tagList"
                                  :key="item.value"
                                  :title=item
                                  type="success"
                                  :closable="false">
                              </el-alert> -->
                            </el-card>
                          </el-col>
                          <el-col style="margin-top: 20px" :span="12">
                            <el-card>
                              <h5>评语</h5>
                              <el-alert
                                  :title=assess
                                  type="info"
                                  :closable="false">
                              </el-alert>
                            </el-card>
                          </el-col>
                        </el-row>
                      </el-card>
                      <el-card>
                        <div style="margin-bottom: 15px">
                          <i class="el-icon-medal"></i><span style="font-weight: bold">荣誉</span>
                        </div>
                        <el-tag size="small" style="margin-bottom: 13px">{{ honorTag }}</el-tag>
                        <el-row :gutter="30">
                          <el-col :span="6">
                            <el-card>
                              <h5>社会实践</h5>
                              <el-progress type="circle"
                                           :percentage="h1Rate"
                                           :color="customColorMethod(h1Rate)"
                                           :format="format1">
                              </el-progress>
                            </el-card>
                          </el-col>
                          <el-col :span="6">
                            <el-card>
                              <h5>学科竞赛</h5>
                              <el-progress type="circle"
                                           :percentage="h2Rate"
                                           :color="customColorMethod(h2Rate)"
                                           :format="format2">
                              </el-progress>
                            </el-card>
                          </el-col>
                          <el-col :span="6">
                            <el-card>
                              <h5>科技成果</h5>
                              <el-progress type="circle"
                                           :percentage="h3Rate"
                                           :color="customColorMethod(h3Rate)"
                                           :format="format3">
                              </el-progress>
                            </el-card>
                          </el-col>
                          <el-col :span="6">
                            <el-card>
                              <h5>创新项目</h5>
                              <el-progress type="circle"
                                           :percentage="h4Rate"
                                           :color="customColorMethod(h4Rate)"
                                           :format="format4">
                              </el-progress>
                            </el-card>
                          </el-col>
                        </el-row>
                      </el-card>
                    </el-tab-pane>
                    <el-tab-pane label="帮助">
                      <el-button @click.prevent.stop="guide" icon="el-icon-question" type="warning" plain>点击查看帮助
                      </el-button>
                    </el-tab-pane>
                  </el-tabs>
                </el-card>
              </el-col>
  
            </el-row>
          </div>
        </div>
      </div>
    </div>
    <el-button type="primary" icon="el-icon-search">搜索</el-button>
  </template>
  
  <script lang="ts">
  import router from "~/router";
  import { defineComponent } from "vue";
  import { 
    getStudentInfo,
    studentDelete,
    studentEditSave 
  } from "~/services/personServ";

  import{
    getStudentIntroduceData
  } from "~/services/infoServ";

  // import {
  //   changeStudentBlog,
  //   downloadPost,
  //   getAuthHeader, getPersonImage,
  // } from "~/services/sHomeServ";


import panThumb from "~/components/PanThumb.vue";
import BasicEditor from "../info/BasicEditor.vue";
import StudentIntroduce from "../info/StudentIntroduce.vue";

import {type ScoreItem, type StudentItem, type OptionItem} from "~/models/general";

/* import {marked} from 'marked' */
import { message } from "~/tools/messageBox";
import { useAppStore } from "~/stores/app";

  //import steps from "@/utils/steps";
  //import 'driver.js/dist/driver.min.css' // import driver.js css
  //import Driver from "driver.js";
  
export default defineComponent({
    //name: "HomeStudent",
    data() {
      return {
        scoreList: [] as ScoreItem[],
        averageScore: 0,
        scoreTag: '',
        morality: 0,
        moralityTag: '',
        e2: 0,
        e2Tag: '',
        e3: 0,
        e3Tag: '',
        tagList: [],
        assess: '',
        honorTag: '',
        hc: '',
        hc1: '',
        hc2: '',
        hc3: '',
        hc4: '',
        h1Rate: 0,
        h2Rate: 0,
        h3Rate: 0,
        h4Rate: 0,
  
        driver: null,
        editShow: false,
        
        studentId: 0 as number,
        form: {} as StudentItem,


        gender: {} as OptionItem,
        genderList: [
        {
          value: "1",
         title: "男",
        },
        {
         value: "2",
         title: "女",
        },
      ] as OptionItem[],




        showClose: false,
        fEdit: false,
        edit: false,
        dialogVisible: false,
        role: "学生",
        activeTab: 'myBlog',
        // studentNum: "",
        // studentName: "",
        // sex: "",
        // age: "",
        // dept: "",
        // birthday: "",
        image0: "",
        sexValue: "",
        authHeader:"", //getAuthHeader(),
      }
    },
    components: {
      panThumb,
      BasicEditor,
      StudentIntroduce
    },
    created() {
      this.doQuery();
    },
    mounted() {
      /*this.driver = new Driver({
        doneBtnText: '完成',              // Text on the final button
        closeBtnText: '关闭',            // Text on the close button for this step
        nextBtnText: '下一条',              // Next button text for this step
        prevBtnText: '上一条',
      })*/
    },
    methods: {
      format(percentage : number){
        return `${percentage}`;
      },
      format1(percentage: number){
        if(percentage==null){
          return 0+'个';
        }
        else{
          return this.hc1+'个';
        }
      },
      format2(percentage: number){
        if(percentage==null){
          return 0+'个';
        }
        else{
          return this.hc2+'个';
        }
      },
      format3(percentage: number){
        if(percentage==null){
          return 0+'个';
        }
        else{
          return this.hc3+'个';
        }
      },
      format4(percentage: number){
        if(percentage==null){
          return 0+'个';
        }
        else{
          return this.hc4+'个';
        }
      },
      
      async doQuery() {
        let res = await getStudentIntroduceData(this.studentId);
        this.form = res.data.info;
        this.studentId = this.form.studentId;
        //这里form是专门用来接受来自后端刚刚传到前端的数据，studentId是为了确定到底是那个学生
        this.scoreList = res.data.scoreList;
        
        for(let i=0; i<this.scoreList.length; i++){
          this.averageScore += this.scoreList[i].mark;
        }
        this.averageScore /= this.scoreList.length;
        this.averageScore = Math.round(this.averageScore);
      },






      customColorMethod(percentage: number) {
        if (percentage < 30) {
          return '#909399';
        } else if (percentage < 70) {
          return '#e6a23c';
        } else {
          return '#67c23a';
        }
      },
  
      guide() {
        /*this.driver.defineSteps(steps)
        this.driver.start()*/
      },
      async onSuccess(){

      },
      // onSuccess(response, file, fileList) {
      //   if (response.code === 0) {
      //     message(this,"保存成功");
      //     setTimeout(() => {
      //       router.go(0)
      //     }, 700)
      //     getPersonImage({studentNum: this.form.name, no: "0"}).then((res) => {
      //       this.image0 = res.data;
      //     });
      //   }
      //   this.$emit("upLoadSucess", response, file, fileList);
      // },
      async doSubmit() {
        
        console.log(this.form.blog);

        const res = await studentEditSave(this.studentId, this.form);

        

          if (res.code === 0) {
            message(this, "提交成功");
          }
          else {
            alert(res.msg);
          }
      },
      // async doSubmit() {
      //   // changeStudentBlog({studentNum: this.$store.state.username, blog: this.blog}).then((res) => {
      //   //   if (res.code === 0) {
      //   //     message(this, "提交成功");
      //   //   } else {
      //   //     alert(res.msg);
      //   //   }
  
      //   // })
      // },
      saveData(val: string) {
        this.form.blog = val;
      },

      logout() {
      const store = useAppStore();
      store.logout();
      router.push({ path: "/Login" });
    },
      downPDF() {
        // downloadPost(
        //     "http://localhost:9090/api/teach/getStudentIntroducePdf",
        //     "个人博客",
        //     {blog: marked(this.blog)}
        // );
      },
    },
  });
  </script>
  
  <style lang="scss" scoped>
  .box-center {
    margin: 0 auto;
    display: table;
  }
  
  .text-muted {
    color: #777;
  }
  
  .user-profile {
    .user-name {
      font-weight: bold;
    }
  
    .box-center {
      padding-top: 10px;
    }
  
    .user-role {
      padding-top: 10px;
      font-weight: 400;
      font-size: 14px;
    }
  
    .box-social {
      padding-top: 30px;
  
      .el-table {
        border-top: 1px solid #dfe6ec;
      }
    }
  
    .user-follow {
      padding-top: 20px;
    }
  }
  
  .user-bio {
    margin-top: 20px;
    color: #606266;
  
    span {
      padding-left: 4px;
    }
  
    .user-bio-section {
      font-size: 14px;
      padding: 15px 0;
      text-align: left;
  
      .user-bio-section-header {
        text-align: left;
        border-bottom: 1px solid #dfe6ec;
        padding-bottom: 10px;
        margin-bottom: 10px;
        font-weight: bold;
      }
    }
  }
  </style>
  
  <style lang="css">
  .slide-enter-active,
  .slide-leave-active {
    transition: opacity 0.4s, transform 0.4s;
  }
  
  .slide-enter-from,
  .slide-leave-to {
    opacity: 0;
    transform: translateX(-30%);
  }
  
  </style>